<template>
  <view class="sub">
    <view class="scoll_box">
      <scroll-view scroll-x="true" class="sub_top_container">
        <view class="first">
          <view class="bg" @click="gotoCate()">
            <image src="../../static/all.png" mode=""></image>
          </view>
          <view>全部</view>
        </view>
        <view class="scrool_item" v-for="(item,index) in scoll_list" :key="index" @click="gotoPerson(item.id)">
          <image :src="item.avatar"></image>
          <view>{{item.nickname}}</view>
        </view>
      </scroll-view>
    </view>
    <view class="list_container">
      <view class="list_item" v-for="(item,index) in sub_list" :key="index" @click="gotoWebView(item.content)">
        <view class="left">
          <view class="title">
            {{item.title}}
          </view>
          <view class="bottom">
            <text class="writer">{{item.author.nickname}}</text>
            <text class="time">{{item.create_time.slice(0,10)}}</text>
          </view>
        </view>
        <view class="right" @click="ChangeImg(index)">
          <img :src="!item.act_time ? '../../static/false_sub.png' : '../../static/true_sub.png'" alt="">
        </view>
      </view>
    </view>
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="success" :message="messageText" :duration="2000"></uni-popup-message>
    </uni-popup>
    <uni-popup ref="alertDialog2" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="立即允许" title="抱歉" content="您尚未允许通知"
        @confirm="getUserProfile()" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    name: "my_subscribe",
    data() {
      return {
        messageText: "还没有订阅的消息噢",
        is_notice: false,
        scoll_list: [],
        sub_list: []
      };
    },
    created() {
      console.log("onshow");
      this.is_notice = JSON.parse(uni.getStorageSync('is_notice') || false);
      this.getFollows()
    },
    onShow() {
      this.getFollows()
    },
    methods: {
      ChangeImg(index) {
        if (JSON.parse(uni.getStorageSync('is_notice') || false)) {
          this.sub_list[index].remind = !this.sub_list[index].remind
        } else {
          this.$refs.alertDialog2.open()
        }
      },
      gotoWebView(url) {
        //const url = 'https://mp.weixin.qq.com/s/5-52wJCImOKPU86MBspHGg'; // 跳转的外链
        //const navtitle = '中国海洋大学新闻中心'; // 这个标题是你自己可以设置的
        wx.navigateTo({
          // 跳转到webview页面
          url: `/pages/webview/webview?url=${url}`,
        });
      },
      async getFollows() {
        const {
          data: res
        } = await uni.$http.get('/self/followee-ids')
        console.log(res.code);
        if (res.code != 1000 && res.code != 6666) return uni.$showMsg()
        if (res.code == 6666) this.$refs.message.open()
        this.scoll_list = res.data.users
        console.log(this.scoll_list.length);
        if (res.code != 6666) {
          for (var i = 0; i < this.scoll_list.length; i++) {
            this.getUserNews(this.scoll_list[i].id)
          }
        }
        console.log(this.sub_list);
      },
      async getUserNews(id) {
        const {
          data: res
        } = await uni.$http.get('/users/' + id + '/news-ids')
        if (res.code != 1000) return uni.$showMsg()
        // console.log(res.data.news);
        for (var i = 0; i < res.data.news.length; i++) {
          this.sub_list.push(res.data.news[i])
        }
        console.log("getNews", this.sub_list);
      },
      gotoPerson(id) {
        console.log("click");
        uni.navigateTo({
          url: '/subpkg/personPage/personPage?id=' + id
        })
      },
      getUserProfile() {
        uni.switchTab({
          url: './/pages/My/My'
        })
      },
      gotoCate() {
        uni.navigateTo({
          url: '/subpkg/my_likes/my_likes'
        })
      }
    }
  }
</script>

<style lang="scss">
  * {
    margin: 0px;
    padding: 0px;
  }

  .sub {
    .scoll_box {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;

      .sub_top_container {
        background-color: #E1E3E6;
        height: 100px;
        width: 100%;
        white-space: norwap;
        padding-left: 18px;

        .scrool_item {
          display: inline-block;
          width: 68px;
          height: 100%;
          padding-top: 11px;
          margin-left: 17px;
          overflow: hidden;

          image {
            height: 59px;
            width: 59px;
            border-radius: 50%;
          }

          view {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
          }
        }

        .first {
          display: inline-block;
          width: 59px;
          height: 100%;
          overflow: hidden;
          margin-top: 8px;

          .bg {
            width: 59px;
            height: 59px;
            border-radius: 50%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 3px;

            image {
              width: 27px;
              height: 27px;
            }
          }

          view {
            text-align: center;
          }
        }
      }
    }

    .list_container {
      .list_item {
        display: flex;
        justify-content: space-around;
        padding-top: 21px;
        border-bottom: 1px solid #BBBBBB;
        padding-bottom: 21px;

        .right {
          height: 61px;
          width: 61px;
          border-radius: 50%;
          border: 1px solid #BBBBBB;
          display: flex;
          justify-content: center;
          align-items: center;

          image {
            transition: all .5s;
            width: 36px;
            height: 36px;
          }
        }

        .left {
          width: 261px;

          .title {
            color: #101010;
            font-size: 18px;
          }

          .bottom {
            color: #AEAEB2;
            font-size: 14px;
            margin-top: 10px;

            .time {
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
</style>
